<template>
    <div>
        <el-col style="width: 100%">
            <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    :collapse="isCollapse"
                    :unique-opened="true">
                <menu-item v-for="item in menuItems" :key="item.index" :item="item"/>
            </el-menu>
        </el-col>
    </div>
</template>

<script>
import MenuItem from './MenuItem.vue';

export default {
    name: 'MenuComponent',
    components: {MenuItem},
    props: {
        menuItems: {
            type: Array,
            required: true
        },
        isCollapse: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            this.$emit('open', key, keyPath);
        },
        handleClose(key, keyPath) {
            this.$emit('close', key, keyPath);
        }
    }
};
</script>

<style scoped>
.menu-wrapper {
    height: 100%;
}
</style>
  
